<template>
  <div class="chart-box">
    <div
      :id="chartId"
      style="width: 100%; height: 360px;margin-top:50px"
    ></div>
    <div class="year-list">
      <ul>
        <li
          :class="{ active: item === activeYear }"
          v-for="item in years"
          :key="item"
          @click="changeYear(item)"
        >
          <a href="javascript:;">{{ item }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import service from "../../../service/projects";

export default {
  name: "chart1",
  components: {
    //someComponent
  },
  props: [
    "chartId",
    "chartYjryData",
    "chartLwData",
    "centerData",
    "lwxzList",
    "type",
    "year",
  ],
  data() {
    return {
      msg: "Hello Vue.js",
      id: "",
      years: ["2020", "2019", "2018"],
      activeYear: "2020",
      datas: [
        {
          year: "2018",
          group: [
            { project_type: "面上项目", _count_id: 38, ratio: "7.85%" },
            { project_type: "青年科学基金项目", _count_id: 17, ratio: "9.94%" },
            { project_type: "地区科学基金项目", _count_id: 4, ratio: "5.80%" },
            { project_type: "优秀青年基金项目", _count_id: 1, ratio: "25%" },
          ],
        },
        {
          year: "2019",
          group: [
            { project_type: "面上项目", _count_id: 45, ratio: "14.52%" },
            { project_type: "青年科学基金项目", _count_id: 26, ratio: "16.46%" },
            { project_type: "地区科学基金项目", _count_id: 10, ratio: "14.29%" },
            { project_type: "重点项目", _count_id: 1, ratio: "14.29%" },
          ],
        },
        {
          year: "2020",
          group: [
            { project_type: "面上项目", _count_id: 45, ratio: "16.13%" },
            { project_type: "青年科学基金项目", _count_id: 31, ratio: "21.99%" },
            { project_type: "地区科学基金项目", _count_id: 9, ratio: "15%" },
          ],
        },
      ],
    };
  },
  computed: {},
  watch: {
    type: function (newVal, oldVal) {
      if (newVal) {
        this.loadData();
      }
    },
  },
  mounted: function () {
    this.loadData();
  },
  methods: {
    loadData() {
      this.chartDiv = echarts.init(document.getElementById(this.chartId));
      this.chartDiv.showLoading({
        text: "数据正在加载...",
        textStyle: { fontSize: 30, color: "#444" },
        effectOption: { backgroundColor: "rgba(0, 0, 0, 0)" },
      });
      let option = {
        columns: ["project_type", "count:id"],
        group: ["project_type"],
        order: [["count:id", 1]],
      };
      if (this.activeYear) option.approval_year = this.activeYear;

      service.getDatas(option, "1060").then((res) => {
        let items = res.data.map(i => {
            const group = this.datas.find(i => i.year == this.activeYear)
                ? this.datas.find(i => i.year == this.activeYear).group
                : []
            return {
                ...i,
                ratio: group.find(j => j.project_type == i.project_type)
                    ? group.find(j => j.project_type == i.project_type).ratio
                    : 0
            }
        })
        if (!items || !items.length) {
            items = this.datas.find(i => i.year == this.activeYear)
                ? this.datas.find(i => i.year == this.activeYear).group
                : []
        }
        this.initData(items);
        this.chartDiv.hideLoading();
      });
    },
    changeYear(item) {
        this.activeYear = item;
        this.chartDiv.dispose()
        this.loadData()
      },
    initData(data) {
      const chartData = data.slice(0, 5).map((item) => {
        return {
          name: item.project_type,
          value: item._count_id,
          ratio: item.ratio,
          unit: "项",
        };
      });
      this.initChart(chartData);
    },
    initChart(chartData) {
      "use strict";
      if (!document.getElementById(this.chartId)) return;
      this.chartDiv = echarts.init(document.getElementById(this.chartId));

      const dashedPic =
        "";
      const color = ["#1bc481", "#ffaf3c", "#eb5e66", "#3898e5", "#1cf9ea"];
      const arrName = [];
      const arrValue = [];
      let sum = 0;
      const pieSeries = [],
        lineYAxis = [];

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      });

      // 图表option整理
      chartData.forEach((v, i) => {
        pieSeries.push({
          // name: '沪昆线到达晚点情况',
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          radius: [75 - i * 15 + "%", 67 - i * 15 + "%"],
          center: ["40%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        pieSeries.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [75 - i * 15 + "%", 67 - i * 15 + "%"],
          center: ["40%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: "#E3F0FF",
              },
            },
            {
              value: 2.5,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        // v.percent = ((v.value / sum) * 100).toFixed(1) + "%";
        v.percent = v.ratio;
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
                padding: [0, 5],
              },
            },
          },
        });
      });

      const option = {
        title: {
          text: this.activeYear ? `${this.activeYear}年度基金项目批准数量` : "",
          top: 0,
          left: "center",
          textStyle: {
            fontSize: 16,
            color: "grey",
          },
        },
        backgroundColor: "#fff",
        color,
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "10%",
          top: "50%",
          align: "right",
          textStyle: {
            color: "#8C8C8C",
          },
          height: 150,
          data: arrName,
        },
        grid: {
          top: "50",
          bottom: "54%",
          left: "40%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter(params) {
                const item = chartData[params];
                return (
                  "{circle|●}{name|" +
                  item.name +
                  "}{bd||}{percent|" +
                  item.percent +
                  "}{value|" +
                  item.value +
                  "}{unit|项}"
                );
              },
              interval: 0,
              inside: true,
              textStyle: {
                color: "#333",
                fontSize: 14,
                rich: {
                  line: {
                    width: 170,
                    height: 10,
                    backgroundColor: { image: dashedPic },
                  },
                  name: {
                    color: "#666",
                    fontSize: 14,
                  },
                  bd: {
                    color: "#ccc",
                    padding: [0, 5],
                    fontSize: 14,
                  },
                  percent: {
                    color: "#333",
                    fontSize: 14,
                  },
                  value: {
                    color: "#333",
                    fontSize: 16,
                    fontWeight: 500,
                    padding: [0, 0, 0, 20],
                  },
                  unit: {
                    fontSize: 14,
                  },
                },
              },
              show: true,
            },
            data: lineYAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: pieSeries,
      };

      this.chartDiv.setOption(option);
      window.addEventListener('resize',()=>{
          this.chartDiv.resize();
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-box {
  position: relative;
  height: 400px;
}
.year-list {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  ul {
    li {
      &.active {
        a {
          background: #3385e3;
          color: #fff;
        }
      }
      a {
        display: block;
        padding: 0 5px;
        height: 25px;
        line-height: 25px;
        color: #333;
        font-size: 12px;
        border: 1px solid #999;
        border-radius: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
